//从仓库获取图书信息
$(function(){
    addBooks=JSON.parse(localStorage.getItem("addBooks"));
    var tbody=$("tbody");
    for(var i=0;i<addBooks.length;i++){
        var num=$("tbody tr").length+1;
        var title=addBooks[i].title;
        var author=addBooks[i].author;
        var publishing=addBooks[i].publishing;
        var img=addBooks[i].img;
        var tr=$("<tr><td>"+num+"</td><td>"+title+"</td><td>"+author+"</td><td>"+publishing+"</td><td><img src='imgs/addBooks/"+img+"' alt='无法显示图片'></td><td><input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm'  onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'></td></tr>")
        tbody.append(tr);
    }
});


//向表中添加行
function doAdd(){
    layui.use('layer', function(){
        var layer = layui.layer;
        var text="<table width='300px' height='180px' style='margin-left:30px'><tr><td>图书名称</td><td><input type='text' value='' style='width:220px;height:30px;border:1px solid #ccc' placeholder='&nbsp;请输入图书名称'></td></tr>"+
            "<tr><td>图书作者</td><td><input type='text' value=''  placeholder='&nbsp;请输入作者' style='width:220px;height:30px;border:1px solid #ccc'></td></tr>"+
            "<tr><td>图书出版社</td><td><input type='text' value=''  placeholder='&nbsp;请输入出版社' style='width:220px;height:30px;border:1px solid #ccc'></td></tr>"+
            "<tr><td>上传图片</td><td><label for='file' class='layui-btn layui-btn-normal'>请选择上传的图片</label><input id='file' type='file' class='layui-btn layui-btn-normal' value='' style='width:150px;display:none;' onchange='doAddImg(this)'></td></tr></table>"+
            "<img src=''  id='newImg' style='margin-left:100px'>";
        layer.open({
            type: 1, 
            content: 
            '<div style="padding-top:10px;padding-left:10px;width:300px;height:100px;">'+ text +'</div>',
             //这里content是一个普通的String
            area: ['500px', '600px'],
            btn: ['新增','关闭'],
            yes: function(index1, layero){
                //   console.log(layero);
                  var trs=$(layero).find("tr");//找到弹出层中的表格中的每一行
                //   console.log(trs);
                  inputs=trs.find("input:last-child");//找到弹出层中的输入框
                //   console.log(inputs);
                  var title=inputs[0].value;
                  var author=inputs[1].value;
                  var publishing=inputs[2].value;
                  var img=document.getElementById("newImg");
                  var addBooks=JSON.parse(localStorage.getItem("addBooks"));
                  var NewBook={//将新增的数据存入对象
                    "id":addBooks.length+1,
                    "title":title,
                    "author":author,
                    "publishing":publishing,
                    "img": showImgName
                  }
                  //将数据存到仓库中
                  addBooks.push(NewBook);
                  localStorage.setItem("addBooks",JSON.stringify(addBooks));

                //将数据加入到表格
                var tbody=$("tbody:eq(0)");
                var tr=$("<tr><td>"+addBooks.length+1,+"</td><td>"+title+"</td><td>"+author+"</td><td>"+publishing+"</td><td>"+img+"</td><td><input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm'  onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'></td></tr>");
                tbody.append(tr);
                layer.closeAll();
                location.reload();
            },
            btn2: function(index, layero){
                //按钮【按钮二】的回调
                // console.log(2);
                // return false;
            },
            cancel: function(){ 
                //右上角关闭回调
                // console.log(4)
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    });
}
var showImgName;
function doAddImg(obj){
    showImgName=obj.files[0].name;
    document.getElementById("newImg").src=window.URL.createObjectURL(obj.files[0]);
}



//修改的弹出层
// $(function(){
    var _this;
    function doChange(obj){
        _this=obj;
        tr=$(_this).parents("tr");
        tds=tr.children();
            layui.use('layer', function(){
                var layer = layui.layer;
                var text="<table width='300px' height='180px' style='margin-left:30px'><tr><td>图书名称</td><td><input type='text' value='"+tds[1].innerHTML+"' style='width:220px;height:30px;border:1px solid #ccc' placeholder='&nbsp;请输入图书名称'></td></tr>"+
                "<tr><td>图书作者</td><td><input type='text' value='"+tds[2].innerHTML+"'  placeholder='&nbsp;请输入作者' style='width:220px;height:30px;border:1px solid #ccc'></td></tr>"+
                "<tr><td>图书出版社</td><td><input type='text' value='"+tds[3].innerHTML+"'  placeholder='&nbsp;请输入出版社' style='width:220px;height:30px;border:1px solid #ccc'></td></tr>"+
                "<tr><td>上传图片</td><td><input type='file' id='file' class='layui-btn layui-btn-normal' value='选择要上传的文件' style='width:150px;' onchange='doAddImg1(this)'></td></tr></table>"+
                "<img src='"+$(tds[4].innerHTML)[0].getAttribute("src")+"' id='newImg1'>";
                layer.open({
                    type: 1, 
                    content: 
                    '<div style="padding-top:10px;padding-left:10px;width:300px;height:100px;">'+ text +'</div>',
                     //这里content是一个普通的String
                    area: ['500px', '600px'],
                    btn: ['修改','关闭'],
                    yes: function(index1, layero){
                        //   console.log(layero);//弹出层
                          var trs=$(layero).find("tr");//找到弹出层中的表格中的每一行
                          var imgs=$(layero).find("img");//弹出层中的图片区域
                        //   console.log(imgs);
                          var inputs=trs.find("input:last-child");//找到弹出层中的输入框
                        //   console.log(inputs);
                        console.log($(tds[4].innerHTML)[0].getAttribute("src"));
                          //将数据修改后存回表格
                          tds[1].innerHTML=inputs[0].value;
                          tds[2].innerHTML=inputs[1].value;
                          tds[3].innerHTML=inputs[2].value;
                        //   tds[4].innerHTM=document.getElementById("newImg1")////////////////////////////********************** */BUG
                          var addBooks=JSON.parse(localStorage.getItem("addBooks"));
                          id=[];
                          for(var i=0;i<addBooks.length;i++){
                            id.push(addBooks[i].id);
                          }
                          index=id.indexOf(tds[0].innerHTML*1);
                        //修改仓库中的数据
                        addBooks[index]={"id":tds[0].innerHTML*1,"title":inputs[0].value,"author":inputs[1].value, "publishing":inputs[2].value,"img":showImageName};
                        localStorage.setItem("addBooks",JSON.stringify(addBooks));
                        location.reload();
                        layer.closeAll();
                    },
                    btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        // console.log(2);
                        // return false;
                    },
                    cancel: function(){ 
                        //右上角关闭回调
                        // console.log(4)
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            });
        // }
    }
var showImageName;
    function doAddImg1(obj){

        // tr=$(_this).parents("tr");
        // tds=tr.children();
        // src=[$(tds[4].innerHTML)[0].getAttribute("src")];
        document.getElementById("newImg1").src=window.URL.createObjectURL(obj.files[0]);
        showImageName=obj.files[0].name;//将上传的图片
        // if(src.indexOf(showImageName)=-1){
            // showImageName=obj.files[0].name;
        // }else{
            // showImageName=$(tds[4].innerHTML)[0].getAttribute("src").splice(-14,)
        // }
    }


 //删除行
function doRemove(obj){
    var addBooks=JSON.parse(localStorage.getItem("addBooks"));
    var tds=$(obj).parents("tr").children("td");//找到点击删除行的每个td格子
    var id1=tds[0].innerHTML;
    var id2=[];
    for(var i=0;i<addBooks.length;i++){
        id2.push(addBooks[i].id);
    }
    $(obj).parents("tr").remove();//祖先元素中的tr,删除
    var thNum=$("tbody tr").find("td:first");
    $.each(thNum,function(index1,item){
        item.innerHTML=index1+1;
    });
    var index3= id2.indexOf(id1*1);
    addBooks.splice(index3,1);
    localStorage.setItem("addBooks",JSON.stringify(addBooks));
}
//全部删除
function doDeleteAll(){
    $("tbody tr").slice(0,$("tbody tr").length).remove();//删除表格中所有行
    var addBooks=JSON.parse(localStorage.getItem("addBooks"));
    addBooks.splice(0,addBooks.length-1);
    localStorage.setItem("addBooks",JSON.stringify(addBooks));
}


//搜索图书
$(function(){
    $("input:eq(0) + div").click(function(){
        var addBooks=JSON.parse(localStorage.getItem("addBooks"));
        var title=[];
        for(var i=0;i<addBooks.length;i++){
            title.push(addBooks[i].title);
        }
        var titleSearch=$("input:eq(0)").val();
        var index=title.indexOf(titleSearch);
        // console.log(index);
        ////////////////
        var tbody=$("tbody");
        tbody.children().remove();
        var tr=$("<tr><td>"+addBooks[index].id+"</td><td>"+addBooks[index].title+"</td><td>"+addBooks[index].author+"</td><td>"+addBooks[index].publishing+"</td><td>"+addBooks[index].img+"</td><td><input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm'  onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'></td></tr>")
        tbody.append(tr);
    });
});